<template>
    <div>
      <Header></Header>
      <div>
        <Gallery :imageList="imgList"></Gallery>
        <el-pagination
          background
          layout="prev, next"
          @prev-click="preClick()"
          @next-click="nextClick()">
        </el-pagination>
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
import Gallery from './Gallery'
import Header from '../components/Header'
import Footer from '../components/Footer'
export default {
  name: 'ImgList',
  components: { Footer, Header, Gallery },
  data () {
    return {
      imgList: {}
    }
  },
  methods: {
    getImageList () {
      const category = this.$route.params.name
      this.$axios.get('/images', { params: { category } }).then(response => {
        // console.log('getImageList')
        this.imgList = response.data.data
      })
    },
    preClick () {
      if (this.imgList.hasPreviousPage) {
        const pageNum = this.imgList.pageNum - 1
        const category = this.$route.params.name
        this.$axios.get('/images', { params: { pageNum, category } }).then(response => {
          this.imgList = response.data.data
        })
      }
    },
    nextClick () {
      if (this.imgList.hasNextPage) {
        const pageNum = this.imgList.pageNum + 1
        const category = this.$route.params.name
        this.$axios.get('/images', { params: { pageNum, category } }).then(response => {
          this.imgList = response.data.data
        })
      }
    }
  },
  mounted () {
    this.getImageList()
  }
}
</script>

<style scoped>

</style>
